<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link href="../css/tab.css" rel="stylesheet">
    <script src="../js/tab.js" type="text/javascript"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap.bundle.min.js"></script>
    <!--    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <script src="../js/jquery.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        table, tr, td {
            border: 1px solid black;
        }

        td {
            width: 300px; /*这里需要自己调整，根据自己的需求调整宽度*/
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        svg {
            width: 36px;
            height: 36px;
        }
    </style>
</head>
<body>
<header>
    <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">About</h4>
                    <p class="text-muted">Add some information about the album below, the author, or any other
                        background context. Make it a few sentences long so folks can pick up some informative tidbits.
                        Then, link them off to some social networking sites or contact information.</p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <h4 class="text-white">Contact</h4>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">Follow on Twitter</a></li>
                        <li><a href="#" class="text-white">Like on Facebook</a></li>
                        <li><a href="#" class="text-white">Email me</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container">
            <a href="#" class="navbar-brand d-flex align-items-center">
                <svg t="1638709338816" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="8564" width="200" height="200">
                    <path d="M942.08 983.04H122.88V573.44c0-22.528 18.432-40.96 40.96-40.96h737.28c22.528 0 40.96 18.432 40.96 40.96v409.6z"
                          fill="#90CAF9" p-id="8565"></path>
                    <path d="M962.56 1003.52H102.4V573.44c0-34.816 26.624-61.44 61.44-61.44h737.28c34.816 0 61.44 26.624 61.44 61.44v430.08zM143.36 962.56h778.24V573.44c0-12.288-8.192-20.48-20.48-20.48H163.84c-12.288 0-20.48 8.192-20.48 20.48v389.12z"
                          fill="#2196F3" p-id="8566"></path>
                    <path d="M819.2 962.56H245.76V317.44L530.432 108.544l290.816 208.896z" fill="#F44336"
                          p-id="8567"></path>
                    <path d="M532.48 563.2c-73.728 0-133.12-59.392-133.12-133.12s59.392-133.12 133.12-133.12 133.12 59.392 133.12 133.12-59.392 133.12-133.12 133.12z m0-204.8c-38.912 0-71.68 32.768-71.68 71.68s32.768 71.68 71.68 71.68 71.68-32.768 71.68-71.68-32.768-71.68-71.68-71.68z"
                          fill="#FFEBEE" p-id="8568"></path>
                    <path d="M993.28 1024h-921.6c-16.384 0-30.72-14.336-30.72-30.72S55.296 962.56 71.68 962.56h921.6c16.384 0 30.72 14.336 30.72 30.72s-14.336 30.72-30.72 30.72z"
                          fill="#FFC107" p-id="8569"></path>
                    <path d="M460.8 962.56h-61.44v-174.08c0-38.912 32.768-71.68 71.68-71.68h122.88c38.912 0 71.68 32.768 71.68 71.68V962.56h-61.44v-174.08c0-6.144-4.096-10.24-10.24-10.24h-122.88c-6.144 0-10.24 4.096-10.24 10.24V962.56z"
                          fill="#FFEBEE" p-id="8570"></path>
                    <path d="M204.8 339.968c-10.24 0-18.432-4.096-24.576-12.288-10.24-14.336-6.144-32.768 8.192-43.008L491.52 73.728c24.576-16.384 57.344-18.432 81.92-2.048l305.152 210.944c14.336 10.24 16.384 28.672 8.192 43.008-10.24 14.336-28.672 16.384-43.008 8.192L538.624 122.88c-2.048-2.048-8.192-2.048-10.24 0L223.232 333.824c-6.144 4.096-12.288 6.144-18.432 6.144z"
                          fill="#FFC107" p-id="8571"></path>
                </svg>
                <strong>实验室</strong>
            </a>
            <p style="color: red;font-size: 20px">欢迎用户:<span id="username" style="color: red;font-size: 20px"></span>
            </p>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</header>
<main>
    <section class="py-5 text-center container">
        <div class="row py-lg-5">
            <div class="col-lg-6 col-md-8 mx-auto">
                <h1 class="fw-light">实验室</h1>
                <p class="lead text-muted">实验室预约系统</p>
                <p>
                    <a href="../../templates/bookLab.html" class="btn btn-primary my-2" id="bookButton">预约</a>
                    <a href="../../templates/index.html" class="btn btn-primary my-2">首页</a>
                    <a href="userInfo.html" class="btn btn-secondary my-2">个人信息</a>
                    <button class="btn btn-secondary my-2" onclick="exit()">退出</button>
                </p>
            </div>
        </div>
    </section>
</main>
<!--</main>-->
<!--选项卡-->
<div id="tab">
    <!--选项的头部-->
    <div id="tab-header">
        <ul>
            <li class="selected">周一</li>
            <li>周二</li>
            <li>周三</li>
            <li>周四</li>
            <li>周五</li>
            <li>周六</li>
            <li>周日</li>
        </ul>
    </div>
    <!--主要内容-->
    <div id="tab-content">
        <div class="dom" style="display: block;">
            <h2 align="center">周一实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day1-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day1-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周二实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day2-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day2-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周三实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day3-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day3-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周四实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day4-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day4-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周五实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day5-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day5-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周六实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day6-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day6-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="dom">
            <h2 align="center">周日实验室开放信息</h2>
            <table>
                <tr>
                    <td align="center">时间</td>
                    <td colspan="5" align="center">实验室名称</td>
                </tr>
                <tr id="day7-t1">
                    <td>08:00-09:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t2">
                    <td>10:00-11:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t3">
                    <td>14:00-15:40</td>
                    <td></td>
                </tr>
                <tr id="day7-t4">
                    <td>16:00-17:40</td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

<footer class="text-muted py-5">
    <div class="container">
        <p class="float-end mb-1">
            <a href="#">Back to top</a>
        </p>
        <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
        <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a
                href="../getting-started/introduction/">getting started guide</a>.</p>
    </div>
</footer>

<script>
    //获取登录状态
    $(function () {
        $.ajax({
            type: "post",
            url: "http://localhost:8080/user/getCurrentUser",
            success: function (result) {
                let res = result.object;
                if (result.code == '200') {
                    document.getElementById("username").innerText = res.username;
                    if (res.priority == '0') {
                        document.getElementById("bookButton").style.display = "none";
                    }
                } else {
                    alert("请先登录账号！");
                    window.location.href = "login.html";
                }
            }
        });
    });

    //显示实验室开放时间
    let day = [1, 2, 3, 4, 5, 6, 7];
    let time = ["08:00-09:40", "10:00-11:40", "14:00-15:40", "16:00-17:40"];
    for (let d = 0; d < day.length; d++) {
        for (let t = 0; t < time.length; t++) {
            let data = {"day": day[d], "time": time[t]};
            $.post('http://localhost:8080/time/findLabNameByTime', data, function (result) {
                let res = result.object;
                let htm = "";
                if (t == '0') {
                    htm += "<td>08:00-09:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '1') {
                    htm += "<td>10:00-11:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '2') {
                    htm += "<td>14:00-15:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                } else if (t == '3') {
                    htm += "<td>14:00-15:40</td>\n";
                    for (let i = 0; i < res.length; i++) {
                        htm += "<td>" + res[i] + "</td>";
                    }
                }
                let dd = d + 1;
                let tt = t + 1;
                $("#day" + dd + "-t" + tt).html(htm);
            });
        }
    }

    //退出系统
    function exit() {
        $.post('http://localhost:8080/user/userExit', function (result) {
            if (result.code == '200') {
                alert(result.msg);
            } else {
                alert(result.msg)
            }
        });
    }
</script>
</body>
</html>